<template>
  <!-- <h2 style="color: #29241edf; margin-left: 40px">各部门占总工资比例</h2> -->
  <div class="chart" ref="chart04Ref">图标的容器</div>
</template>

<script setup>
import { inject, onMounted, ref, computed, watchEffect } from 'vue'
import { countWages } from '../../../api/salary'

const chart04Ref = ref(null)
const $echarts = inject('echarts')
const searchData = inject('searchData')

const wagesCount = ref([])

const achive = async () => {
  // 注释
  const data = ref(['各部门最大工资', '各部门平均工资'])

  //获取数据
  const res = await countWages(searchData.date)
  Object.assign(wagesCount.value, res.data.wagesCount) //整体赋值
  // 创建 indicator 数组
  const indicator = computed(() => {
    return wagesCount.value.map((item) => ({
      name: item.department,
      max: item.bigWages * 1.12
    }))
  })
  // console.log(indicator.value, 'indicator')
  // 创建数据数组
  const result = computed(() => {
    return [
      {
        value: wagesCount.value.map((item) => item.bigWages), // 提取所有的 bigWages 值
        name: data.value[0] // 使用 data 数组中对应的名称
      },
      {
        value: wagesCount.value.map((item) => item.avgWages), // 提取所有的 avgWages 值
        name: data.value[1] // 使用 data 数组中对应的名称
      }
    ]
  })

  // console.log(result.value, 'result')

  if (chart04Ref.value) {
    const myChart = $echarts.init(chart04Ref.value)
    myChart.setOption({
      title: {
        // text: 'Basic Radar Chart'
      },
      legend: {
        data: data.value
      },
      radar: {
        // shape: 'circle',
        indicator: indicator.value
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: result.value
        }
      ]
    })
  }
}

watchEffect(async () => {
  // console.log(searchData.date, 'searchData updated')

  if (searchData.date) {
    await achive()
  }
})
onMounted(async () => {
  await achive()
})
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
